<template>
  <div class="inner">
    <!-- 左侧树结构 -->
    <div class="left">
      <div class="container-tree">
        <el-select v-model="warehouseId" placeholder="请选择仓库" style="width: 100%;margin-bottom: 10px;">
          <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <el-tree @node-click="handleNodeClick" ref="orgTree" :data="treeList" :current-node-key="defaultExpandedId"
          :lazy="true" :load="loadNode" node-key="id" :props="defaultProps" highlight-current icon-class=" "
          :default-expanded-keys="[defaultExpandedId]" accordion>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="node.level == 1" class="father">
              <!-- <i class="el-icon-school"></i> -->
              <svg-icon icon-class="region" :color="data.id === currentNodeKey ? '#ffffff':'#000000'"></svg-icon>
              <span class="text"> <span style="margin: 0 5px;">{{ data.code }}</span> {{ data.name }}</span>
            </span>
            <span v-else-if="node.level == 2" class="son">{{ data.name }}</span>
            {{ data.label }}
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right">
      <!-- 父节点展示信息 -->
      <FatherTreeNode v-if="type === 0" :regionId="parentNodeKey" :fatherData="fatherData" :warehouseId="warehouseId"
        @getWarehouseTreeList="getWarehouseTreeList" @aisleGroup="handleNodeClick">
      </FatherTreeNode>
      <!-- 子节点展示信息 -->
      <ChildrenTreeNode v-else :childrenId="childrenNodeKey" :warehouseId="parentNodeKey" :childrenData="childrenData"
        @getWarehouseTreeList="getWarehouseTreeList"></ChildrenTreeNode>
    </div>
  </div>
</template>

<script>
import FatherTreeNode from './components/FatherTreeNode';
import ChildrenTreeNode from './components/ChildrenTreeNode';
import { reqWarehouseList } from '@/api/warehouse';
import { reqRegionListByWarehouseId, reqAisleGroupList } from '@/api/storage';
export default {
  name: 'AisleManger',
  components: { FatherTreeNode, ChildrenTreeNode },
  data() {
    return {
      // 当前选中的仓库
      warehouseId: '',



      isChangeWarehouse: false,
      isFirst: true,
      // 判断父节点还是子节点
      type: 0,
      // 树形结构
      treeList: [],
      // 树形结构的对应字段名
      defaultProps: {
        children: 'aisleGroupList',
        label: 'name',
        isLeaf: 'leaf'
      },
      fatherData: {},
      childrenData: {},
      // 当前展开的区域id
      currentNodeKey: '',
      // 默认高亮和展开的节点
      defaultExpandedId: '',
      // 父id
      parentNodeKey: '',
      // 子id
      childrenNodeKey: '',
      // 仓库列表
      warehouseList: [],
    }
  },
  created() {
    this.getWarehouseList();
  },
  methods: {
    // 获取所有的仓库信息
    async getWarehouseList() {
      let res = await reqWarehouseList();
      if (res.code === 200) {
        this.warehouseList = res.data;
        if (res.data.length > 0) {
          this.warehouseId = res.data[0].id;
        } else {
          this.warehouseId = '';
        }
      }
    },
    // 树被点击发生的事
    handleNodeClick(data) {
      this.type = data.regionId === undefined ? 0 : 1;
      // 防止树无法合上
      this.defaultExpandedId = data.id;
      this.parentNodeKey = data.regionId === undefined ? data.id : this.parentNodeKey;
      this.fatherData = data;
      this.childrenData = data;
      this.currentNodeKey = data.id;
      if (this.parentNodeKey != this.currentNodeKey) {
        this.childrenNodeKey = this.currentNodeKey;
      };
      this.$nextTick(async () => {
        this.$refs['orgTree'].setCurrentKey(this.currentNodeKey)
      })
    },
    // 获取树和首次加载详情
    async getWarehouseTreeList() {
      let res = await reqRegionListByWarehouseId({ warehouseId: this.warehouseId });
      if (res.code === 200) {
        this.treeList = res.data;
        if (this.treeList.length > 0) {
          // 保存当前区域id
          // this.currentNodeKey = this.currentNodeKey ? this.currentNodeKey : this.treeList[0].id;
          if (this.isChangeWarehouse) {
            this.currentNodeKey = this.treeList[0].id;
            this.fatherData = this.treeList[0];
          } else {
            this.currentNodeKey = this.currentNodeKey ? this.currentNodeKey : this.treeList[0].id;
          }
          this.parentNodeKey = this.currentNodeKey;
          this.defaultExpandedId = this.currentNodeKey;
          this.$nextTick(async () => {
            this.$refs['orgTree'].setCurrentKey(this.currentNodeKey)
          })
          // 保存父节点
          if (this.isFirst) {
            this.parentNodeKey = this.treeList[0].id;
            this.isFirst = false;
          }
        } else {
          this.currentNodeKey = '';
          this.parentNodeKey = '';
          this.defaultExpandedId = '';
          this.fatherData = {};
        }
      }
      this.isChangeWarehouse = false;
    },
    async loadNode(node, resolve) {

      if (node.level == 1) {
        let res = await reqAisleGroupList({ regionId: node.data.id });
        if (res.code === 200) {
          let nodes = res.data.map(item => ({
            ...item,
            leaf: true
          }))
          resolve(nodes);
        }
      }

      if (node.level == 2) {
        resolve([]);
      }
    }
  },
  watch: {
    async warehouseId() {
      this.isChangeWarehouse = true;
      await this.getWarehouseTreeList();
      this.type = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.inner {
  display: flex;
  height: 100%;

  .left {
    width: 304px;
    padding: 32px;
    height: 100%;
    border-right: 1px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .container-tree {
      border-radius: 8px;
      width: 240px;
      height: 750px;
      overflow: auto;
      overflow-x: hidden;
      position: relative;
      padding: 10px;

      .custom-tree-node {
        width: 100%;

        .father {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          // color: #1a1a1a;

          .el-dropdown-link {
            font-size: 20px;
            margin-right: 10px;
          }

          .text {
            flex: 1;
          }
        }
      }

      ::v-deep .el-tree-node__content {
        padding-top: 25px !important;
        padding-bottom: 25px !important;

        .el-tree-node__label {
          font-size: 16px !important;
        }
      }

      ::v-deep .el-tree--highlight-current {
        .el-tree-node.is-current>.el-tree-node__content {
          background-color: #0052D9 !important;
          border-radius: 5px !important;
          color: #fff !important;
          span{
            color: #fff !important;
          }
        }
      }
    }

    .add-btn {
      background-color: #0052D9;
      color: #fff
    }
  }
  .right{
    flex: 1;
    width: 300px;
    height: 100%;
  }
}
</style>